<!-- 交易设置 -->
<template>
    <div>
        <!-- Main Form Start -->
        <el-form ref="formRef" :model="formData" label-width="140px">
            <el-card shadow="never" class="!border-none">
                <div class="text-lg font-bold">交易设置</div>
                <el-form-item label="系统取消待付款订单" class="mt-4">
                    <div>
                        <div>
                            <el-radio label="0" v-model="formData.cancel_unpaid_orders"
                                >关闭系统自动取消待付款订单</el-radio
                            >
                        </div>
                        <div>
                            <el-radio label="1" v-model="formData.cancel_unpaid_orders">
                                <span class="mr-1">订单提交后</span>
                                <el-input
                                    class="ls-input"
                                    v-model="formData.cancel_unpaid_orders_times"
                                ></el-input>
                                <span class="ml-1">分钟内未付款，系统自动取消</span>
                            </el-radio>
                        </div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card shadow="never" class="mt-4 !border-none">
                <div class="text-lg font-bold">购买设置</div>
                <el-form-item label="购买按钮" class="mt-4">
                    <el-radio-group v-model="formData.purchase">
                        <el-radio label="1">允许购买</el-radio>
                        <el-radio label="0">不允许购买</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="按钮文字">
                    <el-input class="w-[240px]" v-model="formData.btn_str"></el-input>
                </el-form-item>
            </el-card>
        </el-form>
        <!-- Main Form End -->

        <!-- Footer Start -->
        <footer-btns>
            <el-button
                type="primary"
                @click="onSubmit"
                v-perms="['ls:system:config:transaction:edit']"
                >保存</el-button
            >
        </footer-btns>
        <!-- Footer End -->
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { apiOrderConfigGet, apiOrderConfigSet } from '@/api/setting/transaction'
import FooterBtns from '@/components/footer-btns/index.vue'
import feedback from '@/utils/feedback'

/** Interface Start **/
interface FormDataObj {
    cancel_unpaid_orders: any //系统取消待付款订单 0-关闭系统自动取消待付款订单 1-订单提交{cancel_unpaid_orders_times}分钟内未付款，系统自动取消
    cancel_unpaid_orders_times: any // 取消未付款订单时间,单位：分钟
    purchase: string //是否允许购买 1-允许；0-不允许
    btn_str: string
}
/** Interface End **/

/** Data Start **/
const formData = ref<FormDataObj>({
    cancel_unpaid_orders: 0,
    cancel_unpaid_orders_times: 0,
    purchase: '',
    btn_str: ''
})
/** Data End **/

/** Methods Start **/
/**
 * @description 获取交易设置
 */
const initOrderConfig = async (): Promise<void> => {
    try {
        formData.value = await apiOrderConfigGet()
    } catch (error) {
        console.log('获取交易设置', error)
    }
}
/**
 * @description 编辑交易设置
 */
const handleOrderConfigEdit = async (): Promise<void> => {
    if (
        formData.value.cancel_unpaid_orders_times == '' &&
        formData.value.cancel_unpaid_orders == 1
    ) {
        feedback.msgWarning('时间不能为空！')
        return
    } else if (formData.value.cancel_unpaid_orders_times < 0) {
        feedback.msgWarning('时间不能为负数')
        return
    }
    try {
        await apiOrderConfigSet({ ...formData.value })
        feedback.msgSuccess('保存成功！')
        initOrderConfig()
    } catch (error) {
        console.log('编辑交易设置', error)
    }
}
/**
 * @description 提交数据
 */
const onSubmit = (): void => {
    handleOrderConfigEdit()
}
/** Methods End **/

/** LifeCycle Start **/
initOrderConfig()
/** LifeCycle End **/
</script>

<style lang="scss" scoped>
.ls-input {
    width: 280px;
}
</style>
